<script setup lang="ts">
  import { onMounted, unref, ref, Ref} from 'vue'
  import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
  import { Carousel as ACarousel} from 'ant-design-vue'
  import { useUserStore } from '/@/store/modules/user';

  interface appItemInfo {
    clientId: number;
    clientName: string;
  }
  const userStore = useUserStore();
  let appData = ref([]) as Ref<Array<Array<appItemInfo>>>;

  const goApp = async (app) => {
    userStore.setLoginApp({
        currentId: app.clientId,
        clientManagerId: app.clientManagerIds || [],
        accessableList: unref(userStore.getLoginApp?.accessableList || [])
    })
    await userStore.getUserInfoAction()
    await userStore.loginEnd(true);
  }
  onMounted(() => {
    let bd = document.body;
    let x_n = Math.floor((bd.clientWidth - 130 - 100) / 140);
    let y_n = Math.floor((bd.clientHeight - 300) / 172);
    let num = x_n * y_n;
    appData.value = (() => {
        let onePageNumber = num; //一页放置的app个数
        let ret = [] as any;
        let data = (userStore.getLoginApp?.accessableList || []);
        if (data.length) {
            let flat1 = data.length / onePageNumber;
            for (let i = 0; i < flat1; i++) {
                ret[i] = [...data.slice(i * onePageNumber, (i + 1) * onePageNumber)];
            }
            return ret;
        }
        return [];
    })();
  })

</script>

<template>
    <a-carousel arrows>
        <template #prevArrow>
            <div class="custom-slick-arrow" style="left: 10px; z-index: 1;">
                <left-circle-outlined />
            </div>
        </template>
        <template #nextArrow>
            <div class="custom-slick-arrow" style="right: 10px">
                <right-circle-outlined />
            </div>
        </template>
        <div v-for="itemList in appData">
            <div class="app-panel">
                <div class="app-item" @click="goApp(item)" v-for="item in itemList">
                    <div class="icon"><span>{{item?.clientName?.slice(0, 1)}}</span></div>
                    <span class="app-name">{{item.clientName}}</span>
                </div>
            </div>
        </div>
    </a-carousel>
</template>

<style lang="less" scoped>
@activeColor:  rgb(198,71,33);
.app-panel {
    width: calc(100% - 100px);
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    .app-item {
        margin: 30px;
        display: inline-block;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .icon {
            width: 80px;
            height: 80px;
            background: rgb(198,71,33);
            font-size: 28px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            border-radius: 4px;
            box-shadow: 0px 0px 4px #b1b1b1;
            padding: 14px;
            img {
                display: inline-block;
                width: 52px;
                height: 52px;
            }
        }
        &:hover {
            cursor: pointer;
            color: @activeColor;
            .icon {
                box-shadow: 0px 0px 4px @activeColor;
            }
        }
    }
}
.app-name {
    text-align: center;
    display: inline-block;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}
</style>